<template>
	<div>
		<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
		<el-popover placement="bottom-start" :width="width" trigger="manual" v-model="isShowSelect" @hide="popverHide">
			<el-tree :data="treeData" ref="tree" class="commons-tree" :style="treeStyle" :props="defaultProps"
				:show-checkbox="multiple" :check-strictly="checkStrictly" default-expand-all
				:expand-on-click-node="false" :highlight-current="true" @node-click="handleNodeClick"
				@check-change="handleCheckChange" :node-key="nodeKey">
			</el-tree>
			<el-select :style="selectStyle" slot="reference" ref="select" :clearable="isSelectClear" v-model="selectedData"
				:multiple="multiple" @click.native="isShowSelect = !isShowSelect" class="tree-select"
				@clear="selectClear">
				<el-option v-for="(item, key) in options" :key="key" :value="item.value" :label="item.label">
				</el-option>
			</el-select>
		</el-popover>
	</div>
</template>

<script>
	export default {
		name: "TreeSelect",
		props: {
			//树结构数据
			treeData: {
				type: Array,
				default () {
					return [];
				},
			},
			//是否多选
			multiple: {
				type: Boolean,
				default () {
					return false;
				},
			},
			defaultProps: {
				type: Object,
				default () {
					return {
						
					}
				}
			},
			//节点
			nodeKey: {
				type: String,
				default () {
					return "id";
				},
			},
			//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
			checkStrictly: {
				type: Boolean,
				default () {
					return false;
				},
			},
			//默认选中的节点key数组
			value: {
				type: Array,
				default () {
					return [];
				},
			},
		
			width: {
				type: Number,
				default () {
					return 350;
				},
			},
			height: {
				type: Number,
				default () {
					return 250;
				},
			},
			isSelectClear: {
				type: Boolean,
				default () {
					return false;
				},
			},
		},
		data() {
			return {
				options: [],
				isShowSelect: false,
				treeStyle: "width:" + this.width + "px;height:" + this.height + "px",
				selectStyle: "width:" + (this.width + 24) + "px",
				checkedIds: [],
				checkedData: [],
				selectedData: [],
			};
		},
		mounted() {
			this.initCheckedData()
		},
		methods: {
			//初始化节点
			initCheckedData() {
				//多选
				if (this.multiple) {
					if (this.value.length > 0) {
						//勾选上传进来的节点
						this.$refs.tree.setvalue(this.value);
					} else {
						//清空所有勾选
						var value = this.$refs.tree.getvalue();
						for (let i = 0; i < value.length; i++) {
							this.$refs.tree.setChecked(value[i], false);
						}
					}
				} else {
					if (this.value.length > 0) {
						//选中进来的节点
						var currentKey = this.value[0];
						this.$refs.tree.setCurrentKey(currentKey);
						var node = this.$refs.tree.getNode(currentKey);
						this.selectedData = node.label;
					} else {
						//清空选中
						this.selectedData = "";
						this.$refs.tree.setCurrentKey(null);
					}
				}
			},

			//弹框隐藏
			popverHide() {
				if (this.multiple) {
					this.checkedIds = this.$refs.tree.getvalue();
					this.checkedData = this.$refs.tree.getCheckedNodes();
				} else {
					this.checkedIds = this.$refs.tree.getCurrentKey();
					this.checkedData = this.$refs.tree.getCurrentNode();
				}
				this.$emit("popoverHide", this.checkedIds, this.checkedData);
			},
			//节点点击时的回调
			handleNodeClick(data, node) {
				if (!this.multiple) {
					let tmpMap = {};
					tmpMap.value = node.nodeKey;
					tmpMap.label = node.label;
					this.options.push(tmpMap);
					this.selectedData = node.label;
					this.isShowSelect = !this.isShowSelect;
					this.$emit("input", [this.$refs.tree.getCurrentKey()])
				}
			},
			selectClear(){
				this.$emit("input", [])
			},
			//节点选中状态发送变化的回调
			handleCheckChange() {
				var value = this.$refs.tree.getvalue();
				this.options = value.map((item) => {
					var node = this.$refs.tree.getNode(item);
					let tmpMap = {};
					tmpMap.value = node.nodeKey;
					tmpMap.label = node.label;
					return tmpMap;
				});
				this.selectedData = this.options.map((item) => {
					return item.label;
				});
			},
		},
		watch: {
			isShowSelect(val) {
				//隐藏select自带的下拉框
				this.$refs.select.blur();
			},
			value(val) {
				if (!val) return;
				this.value = val
				this.initCheckedData()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.commons-tree {
		overflow: auto;
	}
</style>
